<template>
  <div>
    <div class="form-container">
      <el-steps simple :active="3" finish-status="success">
        <el-step title="填写基本信息"></el-step>
        <el-step title="实名认证"></el-step>
        <el-step title="业务授权"></el-step>
        <el-step title="关联对公账户"></el-step>
        <el-step title="注册成功"></el-step>
      </el-steps>
      <v-form-title title="关联对公账户"></v-form-title>
      <el-form :model="form" ref="form" label-width="200px" label-position="right" :rules="rules">
        <el-form-item label="企业名称">{{enterpriseName}}</el-form-item>
        <el-form-item prop="cnapsCode" label="银行行号">
          <el-input class="line-input" maxlength="12" v-model="form.cnapsCode"
                    placeholder="请输入银行行号"></el-input>
        </el-form-item>
        <el-form-item prop="bankBranchName" label="开户银行">
          {{form.bankBranchName}}
        </el-form-item>
        <el-form-item prop="accountNumber" label="银行账号">
          <el-input class="line-input" v-model="form.accountNumber" placeholder="请输入银行账号"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="operation">
      <el-button type="primary" @click="valid">提交审核</el-button>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'

  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }

  })
  export default class Step3 extends Vue {
    async post (f) {
      let res: AjaxResponse = await this.$axios.post('g/gateway/account', f)
      this.$utils.tips(res)
      if (res.responseCode === 200) {
        this.$router.push('/register/step-4')
      }
    }

    get enterpriseName () {
      return window.sessionStorage.getItem('enterpriseName') || ''
    }

    form = {
      bankBranchName: '',
      bankNumber: '',
      userId: '',
      accountNumber: '',
      cnapsCode: ''
    }
    rules = {
      accountNumber: [
        { required: true, message: '请输入银行账号', trigger: 'change' }
      ],
      cnapsCode: [
        { required: true, message: '请输入银行行号', trigger: 'change' },
        { len: 12, message: '请输入12位银行行号', trigger: 'change' },
        { validator: this.testBankNumber, trigger: 'blur' }
      ]
    }

    async testBankNumber (rules, v, cb) {
      if (v.length < 12) return
      let res: AjaxResponse = await this.$axios.get(`g/gateway/bank/${v}`)
      if (res.data === null) {
        this.form.bankBranchName = ''
        cb('您输入的行号有误,请重新输入')
      } else {
        this.form.bankBranchName = res.data.bankBranchName
        this.form.cnapsCode = res.data.cnapsCode
        this.form.bankNumber = res.data.bankNo
        cb()
      }
    }

    valid () {
      this.$refs.form.validate(valid => {
        if (!valid) return
        this.post(this.form)
      })
    }

    mounted () {
      this.form.userId = JSON.parse(window.localStorage.getItem('invite')).enterpriseUserId
    }
  }
</script>

<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .operation {
    text-align: center;
    font-size: 14px;
    color: #999;
    .el-button {
      margin: 30px 0;
    }
  }

  .el-steps {
    margin-bottom: 60px;
  }
</style>
